<template>
  <div>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>用户管理</h2>
        </div>
      </el-col>
    </el-row>

    <el-dialog
        :visible.sync="addUserShow1"
        width="60%"
    >
      <AddUser :movie-id="addUserShowId" v-if="addUserShow2"
               ref="addUserRef"></AddUser>
    </el-dialog>

    <el-dialog
        :visible.sync="updateUserRoleShow1"
        width="60%"
    >
      <UpdateUserRole :movie-id="updateUserRoleShowId" v-if="updateUserRoleShow2"
                      ref="updateUserRoleShowRef"></UpdateUserRole>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChang"
              style="width: 100%">
            <el-table-column
                prop="userName"
                label="用户名"
                align="center">
            </el-table-column>
            <el-table-column
                prop="userPwd"
                label="密码"
                align="center">
            </el-table-column>
            <el-table-column
                label="角色"
                align="center">
              <template slot-scope="scope">
                <span v-for="item in scope.row.roleBeanList" style="margin-left: 5px">{{ item.roleName }}</span>
              </template>
            </el-table-column>
            <!--              <template slot-scope="scope">-->

            <!--                <span style="margin-left: 5px" >{{showRole(scope.row.roleBeanList)}}</span>-->
            <!--              </template>-->
            <el-table-column
                prop="realName"
                label="真实姓名"
                align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="currentPageFn">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 50px">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain style="margin-right: 50px" @click="addUser">添加用户
          </el-button>
        </div>
        <div class="grid-content bg-purple">
          <el-button type="primary" plain style="margin-right: 30px;margin-top: 50px" @click="updateUserRole">修改用户权限
          </el-button>
        </div>
        <div class="grid-content bg-purple">
          <el-button type="primary" plain style="margin-right: 60px;margin-top: 50px" @click="delUser">删除用户
          </el-button>
        </div>
      </el-col>


      <el-col :span="12">
        <div class="grid-content bg-purple-light" style="margin-left: 100px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>查询采购信息</span>

              <el-row>
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple" style="margin-top: 30px">
                    客户：
                  </div>
                </el-col>
                <el-col :span="15">
                  <div class="grid-content bg-purple-light" style="margin-top: 20px">
                    <el-input v-model="userName" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" plain style="margin-right: 20px" @click="init">查询</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AddUser from "./addUser";
import UpdateUserRole from "./updateUserRole";

export default {
  name: "SuperSUPro",
  components: {AddUser, UpdateUserRole},
  data() {
    return {
      updateUserRoleShow1: false,
      updateUserRoleShowId: 0,
      updateUserRoleShow2: false,

      addUserShow1: false,
      addUserShowId: 0,
      addUserShow2: false,

      tableData: [],
      currentRow: '',
      total: 0,
      pageSize: 4,
      currentPage: 1,

      userName: '',
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // showRole(info){
    //   for(let i=0;i<info.length;i++){
    //     if(info[i]==null)
    //     console.log(i)
    //   }
    // },
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
    init() {
      let params = {
        current: this.currentPage,
        size: this.pageSize,
        userName: this.userName,
      }
      this.$axios.get('drp/user/findByItem', {params: params}).then(
          r => {
            console.log(r.data.records)
            this.tableData = r.data.records;
            this.total = r.data.total;
          }
      )
    },
    handleCurrentChang(val) {
      this.currentRow = val
      console.log(val)
    },
    addUser() {
      this.addUserShow1 = true
      this.addUserShow2 = true
    },
    updateUserRole() {
      if (this.currentRow == '') {
        this.$message.warning("请选中一个用户")
        return
      }
      this.updateUserRoleShow1 = true
      this.updateUserRoleShow2 = true
      this.$nextTick(() => {
        this.$refs.updateUserRoleShowRef.init(this.currentRow)
      })
    },
    delUser() {
      if (this.currentRow == '') {
        this.$message.warning("请选中一个用户")
        return
      }
      let formData = new FormData()
      formData.append("userId", this.currentRow.userId)
      this.$axios.post('drp/user/del', formData).then(
          r => {
            if (r.data == 'ok') {
              alert('删除成功')
              location.href = '/index'
            }
          }
      )
    }
  }

}
</script>

<style scoped>

</style>